<style lang="less">
@import "../../styles/common.less";
</style>
<template>
<div>
    <Card>
        <p slot="title">课程列表</p>
        <!-- <div style="margin: 10px">
            显示边框
            <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
            显示斑马纹
            <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
            显示索引
            <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
            显示多选框
            <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
            显示表头
            <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
            表格滚动
            <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
            <br>
            <br> 表格尺寸
            <Radio-group v-model="tableSize" type="button">
                <Radio label="large">大</Radio>
                <Radio label="default">中</Radio>
                <Radio label="small">小</Radio>
            </Radio-group>
        </div> -->

    <Row class="margin-top-10">
        <Col span="18">
        <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
        </Col>
        <Col span="6" class="padding-left-10">
        <Button type="primary" long class="margin-bottom-10" size="large" icon="android-add" @click="add">新增</Button>
        <Card>
            <p slot="title">
                关键字搜索
            </p>
            <Row>
                <Input v-model="searchConName" placeholder="请输入关键字..." style="width: 200px" />
                <span @click="handleSearch" style="margin: 0 10px;">
                        <Button type="primary" icon="search">搜索</Button>
                    </span>
                <Button @click="handleCancel" type="ghost">取消</Button>
            </Row>
        </Card>
        <Card>
            <p slot="title">
                学院
            </p>
            <Row>
                <Tree :data="dataTree" show-checkbox></Tree>
            </Row>
        </Card>
        </Col>
    </Row>
    </Card>

    <Modal v-model="modal1" width="1700" >
        <p slot="header">
            <Icon type="information-circled"></Icon>
            <span>课程详情</span>
        </p>
        <div style="text-align:center">
            <Edit :parentVm="parentVm"></Edit>
        </div>
        <div slot="footer">
            <!-- <Button type="primary" size="large" long :loading="modal_loading" @click="save">保存</Button> -->
        </div>
    </Modal>
    <Modal v-model="modal2" width="1700">
        <p slot="header">
            <Icon type="information-circled"></Icon>
            <span>实验项目详情</span>
        </p>
        <div style="text-align:center">
            <EditItem></EditItem>
        </div>
        <div slot="footer">
            <!-- <Button type="primary" size="large" long :loading="modal_loading" @click="save">保存</Button> -->
        </div>

    </Modal>
</div>
</template>
<script>
import Edit from './edit.vue';
import EditItem from '../courseinfotestitem/edit.vue';
const editButton = (vm, h, currentRow, index) => {
    return h(
        'Button', {
            props: {
                type: currentRow.editting ? 'success' : 'primary',
                loading: currentRow.saving
            },
            style: {
                margin: '0 5px'
            },
            on: {
                click: () => {
                    vm.modal1 = true;
                    // vm.$Modal.info({
                    //     title: '课程详情',
                    //     closable: true,
                    //     scrollable: true,
                    //     width: 1000,
                    //     render: (h) => {
                    //         return h(Edit, {
                    //             ref: "child"
                    //         })
                    //     },
                    //     onOk: () => {
                    //         let mVm = this;
                    //         mVm.$refs['child'].handleSubmit('formValidate');
                    //     }
                    // });
                }
            }
        },
        currentRow.editting ? '保存' : '编辑'
    );
};
const deleteButton = (vm, h, currentRow, index) => {
    return h(
        'Poptip', {
            props: {
                confirm: true,
                title: '您确定要删除这条数据吗?',
                transfer: true
            },
            on: {
                'on-ok': () => {
                    vm.tableData3.splice(index, 1);
                }
            }
        }, [
            h(
                'Button', {
                    style: {
                        margin: '0 5px'
                    },
                    props: {
                        type: 'error',
                        placement: 'top'
                    }
                },
                '删除'
            )
        ]
    );
};
export default {
    components: {
        Edit,
        EditItem
    },
    data () {
        return {
            tableData3: [{
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
            },
            {
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park',
                date: '2016-10-01'
            },
            {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park',
                date: '2016-10-02'
            },
            {
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park',
                date: '2016-10-04'
            },
            {
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park',
                date: '2016-10-03'
            },
            {
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park',
                date: '2016-10-01'
            },
            {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park',
                date: '2016-10-02'
            },
            {
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park',
                date: '2016-10-04'
            }
            ],
            showBorder: false,
            showStripe: false,
            showHeader: true,
            showIndex: true,
            showCheckbox: false,
            fixedHeader: false,
            tableSize: 'default',
            modal1: false,
            modal2: false,
            modal_loading: false,
            searchConName: '',
            data: '',
            dataTree: [
                {
                    title: 'parent 1-1',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 1-1-1'
                        },
                        {
                            title: 'leaf 1-1-2'
                        }
                    ]
                },
                {
                    title: 'parent 1-2',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 1-2-1'
                        },
                        {
                            title: 'leaf 1-2-1'
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        tableColumns3 () {
            return this.$store.state.app.courseColumns;
        },
        parentVm () {
            return this;
        }
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            this.$store.commit('getColumns', 'course');
            this.tableColumns3.forEach(item => {
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = this.tableData3[param.index];
                        let children = [];
                        item.handle.forEach(item => {
                            if (item === 'edit') {
                                children.push(editButton(this, h, currentRowData, param.index));
                            } else if (item === 'delete') {
                                children.push(
                                    deleteButton(this, h, currentRowData, param.index)
                                );
                            }
                        });
                        return h('div', children);
                    };
                }
            });
            this.data = this.tableData3;
        },
        add () {
            this.modal1 = true;
        },
        save () {
            const vm = this;
            vm.$refs['child'].handleSubmit('formValidate', function () {
                vm.modal1 = false;
            });
        },
        search (data, argumentObj) {
            let res = data;
            let dataClone = data;
            for (let argu in argumentObj) {
                if (argumentObj[argu].length > 0) {
                    res = dataClone.filter(d => {
                        return d[argu].indexOf(argumentObj[argu]) > -1;
                    });
                    dataClone = res;
                }
            }
            return res;
        },
        handleSearch () {
            this.tableData3 = this.search(this.data, {
                name: this.searchConName
            });
        },
        handleCancel () {
            this.tableData3 = this.data;
        }
    }
};
</script>